<template>
     <div class="layers1">
          <div class="title">
               <span>态势分析</span>
          </div>
          <div
               class="layersItem"
               v-for="(item, index) in 3"
               :key="item"
               :style="getItemStyle(index)"
               :data-index="index"
          >
               <div class="itemLeft">
                    <span>562</span>
               </div>
               <div class="itemRight">调度应急</div>
          </div>
     </div>
</template>

<script setup lang="ts">
// 计算每个项的位置样式
const getItemStyle = (index: number) => {
     switch (index) {
          case 0:
               return {
                    left: '-30%',
                    top: '25%',
               }
          case 1:
               return {
                    left: '70%',
                    bottom: '45%',
               }
          case 2:
               return {
                    right: '-30%',
                    top: '0%',
               }

          default:
               return {}
     }
}
</script>

<style scoped lang="scss">
// 定义动画变量
$item-animation-duration: 0.8s;
$item-animation-delay: 0.1s;

.layers1 {
     width: 100%;
     height: 100%;
     background: url('@/assets/images/largeScreen/layer1.png') no-repeat center
          center;
     background-size: 100% 100%;
     position: relative;
     // 优化的脉冲动画效果
     animation-delay: 1s;
     animation: pulseLayer1 4s ease-in-out infinite;

     .title {
          position: absolute;
          bottom: 18%;
          left: 33%;
          transform: translateX(-50%);
          color: #f4f4f4;
          display: flex;
          align-items: center;
          justify-content: center;
          letter-spacing: 0.5vw;
          // 标题淡入动画
          animation: fadeInUp 1s ease-out forwards;
          opacity: 0;

          span {
               background: linear-gradient(to right, #00ff88 0%, #01e4f9 100%);
               -webkit-background-clip: text;
               font-size: 1.6vw; // 改为视口宽度的2%
               background-clip: text;
               color: transparent;
               font-family: 'PangMenZhengDaoBiaoTiTi';
               // 添加文字发光动画
               text-shadow: 0 0 5px rgba(1, 228, 249, 0.5);
               animation: glow 2s ease-in-out infinite alternate;
          }
     }

     .layersItem {
          width: auto;
          height: auto;
          display: flex;
          align-items: center;
          position: absolute;
          font-size: 0.8vw; // 改为视口宽度的1%
          color: #f4f4f4;
          opacity: 0;
          transform: translateY(10px);
          // 为每个元素设置不同的动画延迟
          animation: fadeInUp $item-animation-duration ease-out forwards;
          transition:
               transform 0.3s ease,
               opacity 0.3s ease;

          // 根据索引设置不同的动画延迟
          &[data-index='0'] {
               animation-delay: $item-animation-delay * 1;
          }

          &[data-index='1'] {
               animation-delay: $item-animation-delay * 2;
          }

          &[data-index='2'] {
               animation-delay: $item-animation-delay * 3;
          }

          // 悬停效果
          &:hover {
               transform: translateY(-5px) !important;
               z-index: 10;
          }

          .itemLeft {
               // 改为相对单位，基于视口宽度
               width: 6vw;
               height: 2.7vw;
               // 文字竖型
               display: flex;
               align-items: center;
               background: url('@/assets/images/largeScreen/layer1文字底座.png')
                    no-repeat center center;
               background-size: 100% 100%;
               text-align: center;
               padding-top: 0.2vw;
               justify-content: center;
               // 添加悬停效果
               transition: filter 0.3s ease;

               &:hover {
                    filter: brightness(1.2);
               }

               span {
                    background: linear-gradient(
                         to right,
                         #00ff88 0%,
                         #01e4f9 100%
                    );
                    -webkit-background-clip: text;
                    font-size: 1vw;
                    background-clip: text;
                    color: transparent;
                    font-family: 'PangMenZhengDaoBiaoTiTi';
               }
          }

          .itemRight {
               color: #beebf3;
               width: 5vw;
               height: 1.3vw;
               line-height: 1.3vw;
               text-align: center;
               position: absolute;
               top: -25%;
               left: 35%;
               transform: translate(-50%, -50%);
          }
     }
}

// 定义淡入上移动画
@keyframes fadeInUp {
     from {
          opacity: 0;
          transform: translateY(10px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

// 优化的脉冲动画 - 层1
@keyframes pulseLayer1 {
     0% {
          transform: scale(1);
          opacity: 1;
     }

     25% {
          transform: scale(1.03);
          opacity: 0.97;
     }

     50% {
          transform: scale(1.01);
          opacity: 0.95;
     }

     75% {
          transform: scale(1.03);
          opacity: 0.97;
     }

     100% {
          transform: scale(1);
          opacity: 1;
     }
}

// 定义文字发光动画
@keyframes glow {
     from {
          text-shadow: 0 0 5px rgba(1, 228, 249, 0.5);
     }

     to {
          text-shadow:
               0 0 10px rgba(1, 228, 249, 0.8),
               0 0 20px rgba(1, 228, 249, 0.6);
     }
}
</style>
